import Guide from '~/components/layout/guide'
import Snippet from '~/components/snippet'
import { Image } from '~/components/media'
import { InlineCode } from '~/components/text/code'
import Caption from '~/components/text/caption'
import DeploySection from '~/components/guides/deploy-section'

export const meta = {
  title: 'Deploy Gridsome Sites with ZEIT Now',
  description: 'Create your Gridsome site and deploy it with ZEIT Now.',
  published: '2019-08-26T16:05:32.000Z',
  authors: ['developerayo'],
  url: '/guides/deploying-gridsome-with-zeit-now',
  example: 'gridsome',
  demo: 'https://gridsome.now-examples.now.sh',
  image:
    'https://og-image.now.sh/**Deploying%20Gridsome%20Sites**%20%3Cbr%3E%20with%20ZEIT%20Now.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fzeit-black-triangle.svg&images=https%3A%2F%2Fgridsome.org%2Flogos%2Fonly-logo.svg&widths=auto&widths=auto',
  editUrl: 'pages/guides/deploying-gridsome-with-zeit-now.mdx',
  name: 'Gridsome',
  type: 'site',
  lastEdited: '2020-02-04T12:49:00.000Z'
}

[Gridsome](https://gridsome.org/) is an open source Vue.js site generator which gives developers the power to build sites that are fast by default.

In this guide, you will discover how to create a Gridsome site and deploy it with [ZEIT Now](/).

## Step 1: Set Up Your Gridsome Project

Set up a Gridsome project using the [Gridsome CLI](https://gridsome.org/docs/gridsome-cli/#gridsome-cli) and move into the project directory.

<Snippet dark text="gridsome create gridsome-project && cd gridsome-project" />
<Caption>Creating a Gridsome project and moving into the project directory.</Caption>

## Step 2: Deploying Your Gridsome Project with ZEIT Now

<DeploySection meta={meta} />

export default ({ children }) => <Guide meta={meta}>{children}</Guide>

export const config = {
  amp: 'hybrid'
}
